<template>
  <main class="main-container">
    <el-config-provider>
      <RouterView />
    </el-config-provider>
  </main>
</template>

<script setup>
import { onBeforeMount } from 'vue';
import { useMenuStore } from '@/store/menu-store.js';
import { appLocalStorage } from '@/utils/storage-util.js';
import { updateRoute } from '@/utils/router-update-util.js';
import { AppComstants } from '@/common/comstants';

onBeforeMount(() => {
  if (!useMenuStore().routerUpdate && appLocalStorage.getItem(AppComstants.MENUS)) {
    useMenuStore().menuList = updateRoute(appLocalStorage.getItem(AppComstants.MENUS));
  }
});

onMounted(() => {
  closeLoading()
})

/**加载完成之后关闭动画 */
const closeLoading = () => {
  const appLoading = document.getElementById('app-loading')
  
  setTimeout(() => {
    appLoading.style.opacity = 0
  }, 1000) // 渐隐动画

  // 通过事件监听确保动画完成后再移除
  const removeElement = () => {
    appLoading.remove();
    appLoading.removeEventListener('transitionend', removeElement); // 清理事件
  };

  appLoading.addEventListener('transitionend', removeElement);
}
</script>

<style lang="scss" scoped>
.main-container {
  height: 100%;
}
</style>@/store/menu.js@/store/menu-store.js@/store/menu-store.js./utils/router-update-util@/utils/storage-util.js